<template>
  <div ref="QualificationData" class="_wz_QualificationData">
    <Form ref="formAdd" :model="formData" label-position="right" :label-width="120">
      <userData :selectdata="userData"></userData>
      <Card :bordered="true" style="margin: 10px 0px;">
        <p slot="title">结业证信息</p>
        <Row>
          <i-col span="8">
            <div class="demo-upload-list" style="width: 80%;">
              <viewer style="width: 100%;height: 100%;">
                <img :src="certificateImgFile.imgUrl" @error="public.imgDispose">
              </viewer>
            </div>
            <div style="text-align: center;line-height: 35px;">第一年结业证</div>
          </i-col>
          <i-col span="8">
            <div class="demo-upload-list" style="width: 80%;">
              <viewer style="width: 100%;height: 100%;">
                <img :src="certificateSecondImgFile.imgUrl" @error="public.imgDispose">
              </viewer>
            </div>
            <div style="text-align: center;line-height: 35px;">第二年结业证</div>
          </i-col>
          <i-col span="8">
            <div class="demo-upload-list" style="width: 80%;">
              <viewer style="width: 100%;height: 100%;">
                <img :src="certificateThirdlyImgFile.imgUrl" @error="public.imgDispose">
              </viewer>
            </div>
            <div style="text-align: center;line-height: 35px;">第三年结业证</div>
          </i-col>
        </Row>
      </Card>
    </Form>
    <!--图片查看-->
    <Modal title="图片查看" v-model="visible">
      <img :src="imgSrc" v-if="visible" style="width: 100%" @error="public.imgDispose" />
    </Modal>
  </div>
</template>
<script>
  import UserData from "../employee/UserData";

  export default {

    components: {
      UserData,//人员详情
    },
    props: ["selectdata"],//接收来自父组件的数据
    data() {
      return {
        visible: false,
        imgSrc: "",
        userData: {},
        formData: {},//表单数据

        certificateImgFile: {//1图片上传
          imgUrl: null
        },
        certificateSecondImgFile: {//2图片上传
          imgUrl: null
        },
        certificateThirdlyImgFile: {//3图片上传
          imgUrl: null
        },

        trailerList: [],
      }
    },
    beforeCreate() {//beforeCreate创建前状态

    },
    created() {//created创建完毕状态
    },
    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

    },
    mounted() {//mounted 挂载结束状态
      var that = this;
      //人员数据
      that.axios.get(that.apiUrl.basicDriverSafetyList)
      .then(res => {
        if (!!res) {
          that.trailerList = res.data.data;
        }
      }).catch(err => {
        console.log("失败", err)
      })

      that.formData = JSON.parse(JSON.stringify(that.selectdata));//表单
      //修改处理图片
      that.certificateImgFile.imgUrl = !!that.formData.certificateImg ? that.apiUrl.imgUrl + that.formData.certificateImg : '../../static/img/zwtpxd.png';
      that.certificateSecondImgFile.imgUrl = !!that.formData.certificateSecondImg ? that.apiUrl.imgUrl + that.formData.certificateSecondImg : '../../static/img/zwtpxd.png';
      that.certificateThirdlyImgFile.imgUrl = !!that.formData.certificateThirdlyImg ? that.apiUrl.imgUrl + that.formData.certificateThirdlyImg : '../../static/img/zwtpxd.png';

      that.userDataFun(that.formData.uuid)
    },
    methods: {//执行的方法
      //缩略图查看
      handleView(src) {
        this.imgSrc = src;
        this.visible = true;
      },
      //获取人员信息
      userDataFun(e) {
        var that = this;
        if (!!e) {
          that.axios.get(that.apiUrl.driverInfo + e)
          .then(res => {
            if (!!res) {
              that.userData = res.data.data;
            }
          }).catch(err => {
            console.log('失败', err);
          })
        } else {
          that.userData = {};
        }


      },
    },
    watch: {//监听

    },
    beforeUpdate() {//beforeUpdate 更新前状态

    },
    updated() {//updated 更新完成状态

    },
    beforeDestroy() {//beforeDestroy 销毁前状态

    },
    destroyed() {//destroyed 销毁完成状态

    }
  }
</script>
<style lang="less">
  ._wz_QualificationData {
    .ivu-input[disabled], .ivu-select-input[disabled] {
      /*background: #fff !important;*/
      color: #666;
      -webkit-text-fill-color: #666;
    }

    .demo-drawer-footer {
      width: 100%;
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 1px solid #e8e8e8;
      padding: 10px 16px;
      text-align: right;
      background: #fff;
    }

    .demo-upload-list {
      display: block;
      width: 200px;
      height: 140px;
      text-align: center;
      line-height: 140px;
      border-radius: 4px;
      overflow: hidden;
      background: #fff;
      position: relative;
      border: 1px solid rgba(0, 0, 0, .2);
      margin: 0 auto;

      img {
        width: 100%;
        height: 100%;
      }

      .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);

        i {
          color: #fff;
          font-size: 40px;
          cursor: pointer;
          margin: 0 2px;
        }
      }
    }

    .demo-upload-list:hover .demo-upload-list-cover {
      display: block;
    }
  }


</style>
